<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix header-box">
        <span>文章分类</span>
        <el-button type="primary" size="mini" @click="addCate"
          >添加分类</el-button
        >
      </div>
      <!-- 表格区域 -->
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column prop="id" label="序号" width="180"> </el-table-column>
        <el-table-column prop="cate_name" label="分类名称" width="350">
        </el-table-column>
        <el-table-column prop="cate_alias" label="分类别名" width="350">
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" size="mini" @click="edit(scope)"
              >修改</el-button
            >
            <el-button type="danger" size="mini" @click="del(scope)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 添加分类的对话框 -->
    <!-- 修改分类的对话框 -->
    <el-dialog
      :title="addAndEditflag === 'add' ? '添加' : '编辑'"
      width="30%"
      @close="closeDialog"
      @open="openDialog"
      :visible="dialogVisible"
    >
      <el-form
        ref="form"
        :model="formData"
        label-width="80px"
        class="demo-ruleForm"
        :rules="rules"
        :validate-on-rule-change="false"
      >
        <el-form-item label="分类名称" prop="cate_name">
          <el-input v-model="formData.cate_name"></el-input>
        </el-form-item>
        <el-form-item label="分类别名" prop="cate_alias">
          <el-input v-model="formData.cate_alias"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="setFromdata">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ArtCate',
  data () {
    return {
      // + id	        number	分类 Id
      // + cate_name	string	分类名称
      // + cate_alias	string	分类别名
      tableData: [],
      formData: {
        cate_name: '',
        cate_alias: ''
      },
      dialogVisible: false, // dialog框是否显示
      // 校验规则
      rules: {},
      // 现在进行的是添加，还是编辑操作
      addAndEditflag: ''
    }
  },
  methods: {
    // 获取数据
    async initData () {
      const { data: res } = await this.$http.get('/my/cate/list')
      console.log(res)
      this.tableData = res.data
    },
    addCate () {
      this.dialogVisible = true
      this.addAndEditflag = 'add'
    },
    // 编辑
    async edit (scope) {
      this.dialogVisible = true
      this.addAndEditflag = 'edit'
      const { data: res } = await this.$http.get(
        '/my/cate/info?id=' + scope.row.id
      )
      // 数据回显
      this.formData = res.data
    },
    // 删除
    del (scope) {
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await this.$http.delete('/my/cate/del?id=' + scope.row.id)
          this.initData()
          console.log(res)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 为验证规则赋值
    rulesFn () {
      // 解决对话框关闭时清空内容后还会触发验证的问题（input获得焦点后按esc键关闭 dialog，再打开一个dialog会触发验证的问题）
      // 注意： 需要在form上添加 :validate-on-rule-change="false"  意思是rules变化后不会立即执行一次（默认会执行）
      // 思路：需要使用验证的时候给验证规则项赋值，使用完成后清除验证规则，让他没得验证
      this.rules = {
        cate_name: [
          { required: true, message: '请输入分类名称"', trigger: 'blur' }
        ],
        cate_alias: [
          { required: true, message: '请输入分类别名', trigger: 'blur' },
          {
            pattern: /^[A-Za-z0-9]+$/,
            message: '请输入英文或者数字',
            trigger: 'blur'
          }
        ]
      }
    },
    openDialog () {
      // 打开dialog的时候，把验证规则赋值过去
      this.rulesFn()
    },
    // 关闭弹出框执行
    closeDialog () {
      // 关弹出框的时候复位表单
      this.$refs.form.resetFields()
      // 关闭验证规则
      this.rules = {}
      // 如果点击了编辑，数据回显的时候会在数据中添加id，所以关闭弹窗的时候，把保存数据的对象恢复原样
      this.formData = {
        cate_name: '',
        cate_alias: ''
      }

      this.dialogVisible = false
    },

    // 提交表单数据
    setFromdata () {
      this.$refs.form.validate(async valid => {
        // 兜底校验 console.log(valid)
        if (valid) {
          // 新增文章
          if (this.addAndEditflag === 'add') {
            const res = await this.$http.post('/my/cate/add', this.formData)
            this.$message.success(res.data.message)
            // 清除表单数据
            this.$refs.form.resetFields()
          }
          // 编辑数据
          if (this.addAndEditflag === 'edit') {
            const res = await this.$http.put('/my/cate/info', this.formData)
            this.$message.success(res.data.message)
            // 关闭弹窗
            this.dialogVisible = false
          }
          // 数据操作完成后，重新获取数据并渲染
          this.initData()
          // 关闭弹窗
          this.dialogVisible = false
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  },
  created () {
    // 初始化数据
    this.initData()
  }
}
</script>

<style lang="less" scoped>
.header-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
